<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 元素遍历：  用于DOM树中遍历元素 【理解：针对元素嵌套：父子级】
		   children()		  功能：获取匹配元素集合中每个元素的子元素
		   parent()			  功能：获取匹配元素集合中每个元素的父元素
		   
		   siblings()		  功能：获取匹配元素集合中每个元素的所有兄弟元素
		   
		   next()			  功能：获取匹配元素集合中每个元素的下一个兄弟元素
		   prev()			  功能：获取匹配元素集合中每个元素的上一个兄弟元素
		   
		   each()			  功能：遍历匹配元素的集合--遍历所有子元素
							  语法糖：each(function(index,element){
									  $(element).text(`${index}`)
									  注意：打印遍历的值，不可以使用单双引号+拼接
									  功能：获取到的元素，遍历元素内容
							  })
		 -->
		 <style>
			 .container{
				 border: 1px solid black;
				 margin: 10px;
				 padding: 10px;
			 }
			 .box{
				 background: #67ffe9;
				 margin: 10px;
				 padding: 10px;
			 }
			 button{
				 padding: 5px;
			 }
		 </style>
	</head>
	<body>
		 <div class="container">
			 <div class="box" id="box1">盒子1</div>
			 <div class="box" id="box2">盒子2</div>
			 <div class="box" id="box3">盒子3</div>
			 <div class="box" id="box4">盒子4</div>
			 <div class="box" id="box5">盒子5</div>
			 <div class="box" id="box6">盒子6</div>
		 </div>	 
		 <button id="gcBtn">获取子元素</button>
		 <button id="gpBtn">获取父元素</button>
		 <button id="gsBtn">获取兄弟元素</button>
		 <button id="gnBtn">获取下一个群体</button>
		 <button id="grBtn">获取上一个群体</button>
		 <button id="loopBtn">遍历元素</button>
		 <script>
			 /*1.点击 获取子元素 按钮  实现.container下所有子元素*/
			 $("#gcBtn").click(function(){
				$(".container").children().css("background-color","#ff0");
			 });
			 /*2.点击 获取父元素 按钮  实现.container 添加背景色*/
			 $("#gpBtn").click(function(){
			 	$(".box").parent().css("background-color","#f700ff");
			 });
			 /*3.点击 获取兄弟元素 按钮  实现除了 #box4 字体颜色不变，其他变色*/
			 $("#gsBtn").click(function(){
				$("#box4").siblings().css("background-color","#ff0");
			 });
			 /*4.点击 获取下一个兄弟元素 按钮  实现#box4 下一个兄弟，添加背景色*/
			 $("#gnBtn").click(function(){
			 	$("#box4").next().css("background-color","#ff0");
			 });
			 /*5.点击 获取上一个兄弟元素 按钮  实现#box6 上一个兄弟，添加效果
													圆、背景图、背景色、盒子阴影
			 */
			$("#grBtn").click(function(){
				$("#box6").prev().css({ "background-color":"#ff0",
										"width":"100px",
										"height":"100px",
										"border-radius":"50%",
										"background-image":"url(../img/hamu.gif)",
										"box-shadow":"5px 5px 10px #000",
										"background-size":"100% 100%",
										"font-size":"0"
				});
			});
			/*6.点击 遍历元素  按钮   实现每个盒子上，这是第几个盒子*/
			$("#loopBtn").click(function(){
				//通过 .box 抓到6个元素【一组集合】
				$(".box").each(function(i,e){  //e 代表元素   i 代表下标
					//每个盒子加文字：这是第几个盒子
					$(e).text(`这是第${i+1}个盒子`);
				});
			});
		 </script>
	</body>
</html>